<template>
  <div class="Setting">
    <div>
      <el-card class="box-card">
        <!-- 头部 -->
        <div slot="header" class="clearfix">
          <myel-header text1="首页" text2="个人设置"></myel-header>
        </div>
        <!-- 下部 -->
        <div class="file">
          <div class="left">
            <el-form ref="form" :model="form" label-width="100px">
              <!-- 编号 -->
              <el-form-item label="编号">{{form.id}}</el-form-item>
              <!-- 手机号 -->
              <el-form-item label="手机号">{{form.mobile}}</el-form-item>
              <!-- 媒体名称 -->
              <el-form-item label="媒体名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <!-- 媒体简介 -->
              <el-form-item label="媒体简介">
                <el-input type="textarea" v-model="form.intro"></el-input>
              </el-form-item>
              <!-- 联系邮箱 -->
              <el-form-item label="联系邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <!-- 保存设置 -->
              <el-form-item>
                <el-button type="primary" @click="upbaocun">保存设置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-error="onError"
              :http-request="uploadPhoto"
            >
              <img v-if="form.photo" :src="form.photo" class="avatar yangbus">
              <i v-else class="el-icon-plus avatar-uploader-icon yangbus"></i>
            </el-upload>
            <span>点击上传</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 接口
import { getprofile, upprofile, moduserImage } from '../../api/articles.js'
// 头部
import MyelHeader from '../../components/MyelHeader.vue'
export default {
  name: 'Setting',
  components: {
    MyelHeader
  },
  data () {
    return {
      fit: ['cover'],
      form: {
        mobile: '',
        id: null,
        name: '',
        email: '',
        intro: '',
        region: '',
        photo: ''
      }
    }
  },
  created () {
    this.mygetuser()
  },
  methods: {
    // 上传头像
    async uploadPhoto (obj) {
      // obj就是用户点击图片时返回的图片信息
      // file就是es6语法结构出来的主要图片信息
      const { file } = obj
      // new 一个实例化对象FormData()
      const formData = new FormData()
      // 将图片信息以键值对的形式传入，逗号分隔
      formData.append('photo', file)
      // 调用接口
      const { data: { data: { photo } } } = await moduserImage(formData)
      this.form.photo = photo
    },
    // 失败
    onError () {
      this.$message.error('上传头像失败')
    },
    // 成功后
    handleAvatarSuccess (res) {
      this.$message.success('上传头像成功')
    },
    // 上传前
    beforeAvatarUpload (file) {
      this.upphoto = file
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 获取用户信息
    async mygetuser () {
      const { data } = await getprofile()
      this.form = data.data
    },
    // 编辑用户
    async upbaocun () {
      try {
        const { data } = await upprofile({
          name: this.form.name,
          intro: this.form.intro,
          email: this.form.email
        })
        if (data.message === 'OK') {
          this.eventBus.$emit('update:setUserPhoto', this.form.name)
          this.eventBus.$emit('update:imgUserPhoto', this.form.photo)
          if (this.form.name && this.form.photo) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message({
              type: 'success',
              message: '网络延迟，请刷新!'
            })
          }
        }
      } catch (error) {
        this.$message('网络延迟，请刷新！')
      }
    }
  }

}
</script>

<style lang="less" scoped>
.left {
  width: 700px;
}
.right {
  width: 225px;
  height: 225px;
  margin-right: 200px;
  text-align: center;
}
.file {
  display: flex;
  justify-content: space-between;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 225px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
  border: 1px #ffd04b dashed;
}
.yangbus {
  width: 225px;
  height: 225px;
  border-radius: 10px;
  border: 1px #ffd04b dashed;
}
</style>
